<template>
  <view class="vip-control">
    <my-header title="会员中心"></my-header>
    <my-content class="content" :default-padding-top="10">
      <swiper class="user-vip-swiper" :current="current" @change="current = $event.detail.current" next-margin="30rpx" previous-margin="30rpx">
        <swiper-item class="vip-user" v-for="item in userLevelData" :key="item.id"
          :style="{ backgroundImage: `url(${item.imageBgUrl})`,
          }"
        >
          <view class="vip-user-left">
            <view class="vip-status" style="visibility: hidden">已解锁等级</view>
            <view class="vip-user-info">
              <image class="user-avatar" :src="userData.avatar"></image>
              <view class="user-vip">
                <view class="username">{{ userData.nickname }}</view>
                <view class="user-level">
                  <image class="user-vip-icon" src="https://www.dingxians.cn/upload/images/user/vip-icon.png"></image>
                  <text>{{ item.name }}</text>
                </view>
              </view>
            </view>
            <view class="vip-user-bottom" v-if="item.level_id === userData.level_id">
              <image class="user-vip-icon" src="https://www.dingxians.cn/upload/images/user/vip-icon.png"></image>
              <text class="level-count">还需{{ userData.difference_integral }}成长值可升级</text>
            </view>
          </view>
          <view class="vip-user-right">
            <image class="vip-icon"></image>
            <view v-if="item.level_id === userData.level_id" class="btn-receive" :class="{ disable: userData.level_id < item.level_id || userData.vip_sign_status === 2 }" @click="vipSign">
              签到领钻石
            </view>
          </view>
        </swiper-item>
      </swiper>

      <view class="vip-level-content">
        <view class="vip-level-title">VIP达标等级福利</view>
        <view class="vip-level-data" v-if="userLevelData.length > 0">
          <view class="vip-level-item">
            <image class="vip-level-icon" src="https://www.dingxians.cn/upload/images/user/ic-vip-level.png"></image>
            <view class="vip-level-name">{{ userLevelData[current].name }}</view>
            <view class="vip-level-label">当前等级</view>
          </view>
          <view class="vip-level-item">
            <image class="vip-level-icon" src="https://www.dingxians.cn/upload/images/user/ic-vip-cz.png"></image>
            <view class="vip-level-name">{{ userLevelData[current].total_pay }}</view>
            <view class="vip-level-label">当前成长值</view>
          </view>
          <view class="vip-level-item">
            <image class="vip-level-icon" src="https://www.dingxians.cn/upload/images/user/ic-vip-ls.png"></image>
            <view class="vip-level-name">{{ userLevelData[current].lower_standard }}</view>
            <view class="vip-level-label">需达标流水</view>
          </view>
          <view class="vip-level-item">
            <image class="vip-level-icon" src="https://www.dingxians.cn/upload/images/user/ic-vip-point.png"></image>
            <view class="vip-level-name">{{ userLevelData[current].daily_value }}</view>
            <view class="vip-level-label">钻石</view>
          </view>
        </view>
      </view>

      <view class="vip-level-progress">
        <view class="vip-pro-header">
          <text class="vip-pro-title">VIP升级挑战</text>
          <text class="vip-pro-current">{{ userData.ext_info }}</text>
        </view>
        <liu-progressbar bg-color="#FFC976" style="margin: 10rpx 0" :progress="userData.level_rate" />
        <view class="vip-pro-desc">
          <text>{{ userData.level_info }}</text>
          <!--          <text style="margin-left: 20rpx">目前60/60已达标</text>-->
          <view style="flex: 1"></view>
          <text>{{ userData.grow_value }}/{{ userData.total_pay }}</text>
        </view>
      </view>

      <view class="vip-rule">
        <view class="vip-rule-title">会员规则</view>
        <view class="vip-rule-content" v-html="privacyData"></view>
      </view>

      <!--      <view class="header">
              <view class="top">
                <view class="avatar-bg">
                  <image :src="userData.avatar" class="avatar"></image>
                </view>
                <view class="right">
                  <view class="right_item">
                    <view class="nickname">{{ userData.nickname }}</view>
                    <view class="sign action" v-if="userData.vip_sign_status == 0">升级后签到</view>
                    <view @click="vipSign()" class="sign" v-if="userData.vip_sign_status == 1">签到领钻石</view>
                    <view class="sign action" v-if="userData.vip_sign_status == 2">今日已签到</view>
                  </view>
                  <view class="right_item">
                    <view class="level">VIP{{ userData.level_id }}</view>
                  </view>
                </view>
              </view>
      
              <view class="bottom">
                <view style="width: 100%">
                  <liu-progressbar
                    textInside
                    bgColor="#DED000"
                    :progress="userData.level_rate"
                    dsColor="#080808"
                    :height="'16rpx'"
                  />
                </view>
      
                &lt;!&ndash; <view class="rate_box">
                  
                </view> &ndash;&gt;
                <view class="rate_bottom">
                  <view class="rate_bottom_info">
                    <view style="color: #808080">{{ userData.level_info }}</view>
                    <view style="color: #ded000">{{ userData.ext_info }}</view>
                  </view>
                  <view>
                    <view class="rate_text" style="color: #808080">
                      <text style="color: #ded000">{{ userData.grow_value }}</text>
                      /{{ userData.total_pay }}
                    </view>
                    <view class="action" @click="header('/pages/user/user_level_log')">五日流水</view>
                  </view>
                </view>
              </view>
            </view>
            <view class="level_box">
              <view class="level_header">
                <view>VIP0-VIP10各等级奖励</view>
                <view class="level_header_rule" @click="getContent">
                  会员规则
                  <image
                    src="https://www.dingxians.cn/upload/images/user/question-item.png"
                    style="width: 22rpx; height: 22rpx; margin-left: 10rpx"
                    mode="scaleToFill"
                  />
                </view>
              </view>
      
              <view class="level_content">
                <view class="level_thead">
                  <view class="level_thead_item">等级</view>
                  <view class="level_thead_item">所需成长值</view>
                  <view class="level_thead_item">达标流水</view>
                  <view class="level_thead_item">签到钻石</view>
                </view>
                <view class="level_th">
                  <view
                    class="level_tr"
                    v-for="(item, index) in userLevelData"
                    :key="index"
                    :style="{ backgroundColor: index % 2 !== 0 ? 'black' : '' }"
                  >
                    <view class="level_td" style="border-right: 1px solid #080808">
                      <view class="vip">VIP{{ item.level_id }}</view>
                    </view>
                    <view class="level_td" style="border-right: 1px solid #080808">{{ item.total_pay }}</view>
                    <view class="level_td" style="border-right: 1px solid #080808">{{ item.lower_standard }}</view>
                    <view class="level_td">{{ item.daily_value }}</view>
                  </view>
                </view>
              </view>
            </view>-->
    </my-content>

    <!-- 会员规则弹窗 -->
    <view class="vip-rule-dialog" v-if="isShowVipRule">
      <view class="dialog-content">
        <view class="dialog-header">
          <view class="dialog-header-title">会员规则</view>
          <image
            @click="isShowVipRule = false"
            class="close-btn"
            src="https://www.dingxians.cn/upload/images/shop/close-btn.png"
            mode="scaleToFill"
          />
        </view>
        <scroll-view scroll-y class="dialog-scroll-view">
          <rich-text :nodes="privacyData" class="privacy"></rich-text>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import api from '../../api/index.js'

export default {
  data() {
    return {
      userData: {
        id: '',
        nickname: '',
        avatar: 'https://www.dingxians.cn/upload/images/user/avatar.png',
        balance: 0,
        point: 0,
        level_id: 0,
        commission: 0,
        messageCount: 0,
        lower_standard: 0,
        five_total_pay: 0,
        level_info: '',
        ext_info: '',
        grow_value: 0,
        total_pay: 0,
      },
      userLevelData: [],
      loading: false,
      privacyData: '',
      isShowVipRule: false,
      current: 0,
    }
  },
  onLoad() {
    this.getUser()
    // this.getUserLevel()
    this.getContent()
  },
  onShow() {
    this.userData.nickname = uni.getStorageSync('nickname')
    this.userData.avatar = uni.getStorageSync('avatar')
    this.userData.id = uni.getStorageSync('user_id')
  },

  methods: {
    getContent() {
      uni.showLoading({
        title: '数据加载中',
      })
      api.contents
        .show('vip_rule')
        .then((res) => {
          if (res.code === 200) {
            uni.hideLoading()
            this.privacyData = res.data.content
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    vipSign() {
      this.userData.vip_sign_status = 2
      api.userVipSigns
        .store()
        .then((res) => {
          if (res.code === 200) {
            this.show('签到成功')
            this.getUser()
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    getUser() {
      uni.showLoading({
        title: '数据加载中',
      })
      api.users
        .show()
        .then((res) => {
          if (res.code === 200) {
            uni.hideLoading()
            this.userData = res.data
            if (this.userData.level_rate > 100) {
              this.userData.level_rate = 100
            }
            this.current = res.data.level_id
			this.getUserLevel()
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    getUserLevel() {
      this.loading = true
      uni.showLoading({
        title: '数据加载中',
      })
      api.userLevels
        .index()
        .then((res) => {
          this.loading = false
          uni.hideLoading()
          if (res.code === 200) {
			  res.data.forEach((item)=>{
				  if( item.level_id <= this.userData.level_id){
					  item.imageBgUrl = 'https://www.dingxians.cn/upload/images/user/bg-user-vip.png'
				  }else{
					  item.imageBgUrl = 'https://www.dingxians.cn/upload/images/user/bg-user-vip2.png'
				  }
			  })
            this.userLevelData = res.data
			console.log(this.userLevelData,"this.userLevelDatathis.userLevelDatathis.userLevelData")
			
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.vip-control {
  background: #000;
  height: 100%;
  min-height: 100vh;
}

.content {
  background: #000;
  height: 100%;
  min-height: 100vh;

  .user-vip-swiper {
    width: 750rpx;
    height: 300rpx;
	background-size: 100% 100%;
  }

  .vip-user {
    display: flex;
    color: #ffc976;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 20rpx;
    background: url('https://www.dingxians.cn/upload/images/user/bg-user-vip.png');
    background-size: 100% 100%;

    .vip-user-left {
      .vip-status {
        font-size: 28rpx;
      }

      .user-vip-icon {
        width: 35rpx;
        height: 35rpx;
      }

      .vip-user-info {
        margin-top: 50rpx;
        display: flex;
        align-items: center;

        .user-avatar {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          border: 1rpx solid #fff9d3;
        }

        .user-vip {
          margin-left: 20rpx;

          .username {
            font-size: 36rpx;
            color: white;
          }

          .user-level {
            display: flex;
            align-items: center;
          }
        }
      }

      .vip-user-bottom {
        margin-top: 50rpx;
        display: flex;
        align-items: center;

        .level-count {
          font-size: 24rpx;
          margin-left: 10rpx;
        }
      }
    }

    .vip-user-right {
      .vip-icon {
        width: 210rpx;
        height: 210rpx;
      }

      .btn-receive {
        padding: 10rpx 0;
        text-align: center;
        color: #663409;
        background: linear-gradient(270deg, #ffcd90 0%, #ff9a00 100%);
        border-radius: 54rpx 54rpx 54rpx 54rpx;
        border: 1rpx solid #c87800;

        &.disable {
          filter: grayscale(1);
        }
      }
    }
  }

  .vip-level-content {
    margin: 30rpx auto;
    width: 690rpx;
    color: white;

    .vip-level-title {
      font-size: 32rpx;
    }

    .vip-level-data {
      margin-top: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;

      .vip-level-item {
        text-align: center;
        font-size: 20rpx;

        .vip-level-icon {
          width: 108rpx;
          height: 108rpx;
        }

        .vip-level-name {
          color: #ffc976;
          margin-top: -25rpx;
          border-radius: 140rpx 140rpx 140rpx 140rpx;
          border: 1rpx solid #ffc976;
        }

        .vip-level-label {
          margin-top: 10rpx;
        }
      }
    }
  }
}

.vip-level-progress {
  background-image: url('https://www.dingxians.cn/upload/images/user/bg-vip-pro.png');
  background-size: 100% 100%;
  color: white;
  width: 710rpx;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 10rpx 30rpx 30rpx 30rpx;

  .vip-pro-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .vip-pro-title {
      font-size: 32rpx;
      color: #ffc976;
      font-family: 'youshe', serif;
    }

    .vip-pro-current {
      font-size: 18rpx;
    }
  }

  .vip-pro-desc {
    display: flex;
    align-items: center;
    font-size: 18rpx;
  }
}

.vip-rule {
  color: white;
  padding: 30rpx;

  .vip-rule-title {
    text-align: center;
    font-size: 36rpx;
  }

  .vip-rule-content {
    margin-top: 30rpx;
  }
}

.vip-rule-dialog {
  width: 100vw;
  height: 100vh;
  z-index: 9999999;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);

  .dialog-content {
    width: 654rpx;
    height: 1100rpx;
    background-image: url('https://www.dingxians.cn/upload/images/user/bg-vip-rule.png');
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;

    .dialog-header {
      position: relative;

      .dialog-header-title {
        margin-top: 34rpx;
        font-size: 44rpx;
        text-align: center;
        color: #dedede;
        font-family: 'youshe';
        text-shadow: 0px 0px 12px #ded000;
      }

      .close-btn {
        position: absolute;
        top: -20rpx;
        right: 20rpx;
        width: 64rpx;
        height: 64rpx;
      }
    }

    .dialog-scroll-view {
      flex: 1;
      overflow: hidden;
      color: #dedede;
      font-size: 26rpx;
      padding: 30rpx 40rpx;
      box-sizing: border-box;
    }
  }
}
</style>
